// JSX插值表达式 语法：一个花括号，里面写插值表达式即可
/* 
  基本数据类型：number string boolean undefined unll
  复杂数据类型：array object function
  其他：JSX本身，三元，逻辑运算符

  number string：可以直接渲染
  boolean undefined unll：不会渲染出任何内容，需要配合String()
  对象，数组
  1.对象不能直接在 插值表达式 中直接渲染
  2.数组的每一项，都会渲染成 dom 元素
  3.函数、三元、逻辑、jsx本身
    3.1 函数的本质上也是一个对象，所以不能直接渲染,一般都是函数调用，返回值做渲染
    3.2 三元、逻辑、JSX本身：通常和其他的数据类型配合使用
*/

import React from 'react';
//通过解构的方式解构出来createRoot
import { createRoot } from 'react-dom/client';

// 函数的本质上也是一个对象，所以不能直接渲染
function handleHello() {
  return 'Hello World！！！';
}

const isShow = false;
const divNode = (
  <div>
    {/* <h3>{handleHello}</h3> */}
    <h3>{handleHello()}</h3>
    <h3>{isShow ? '显示' : '不显示'}</h3>
    <h3>逻辑运算符：{isShow && '显示'}</h3>
    <h3>逻辑运算符：{!isShow && '显示'}</h3>

    {/* JSX本身也是可以渲染，但是有点多余，一般配合逻辑运算使用 */}
    {<h3>我是jsx内容</h3>}
  </div>
);

// 这是React18版本新出的挂载节点的方法
const root = createRoot(document.getElementById('root'));
root.render(divNode);
